<script setup>
import {onMounted, ref} from 'vue'
import HomePanel from './HomePanel.vue'
import {reqAllGoodsAPI} from "@/api/home.js";
import GoodsIndex from '@/components/goods/GoodsIndex.vue'

onMounted(() => getAllGoodsList())

const goodsProduct = ref([])
const getAllGoodsList = async () => {
  const res = await reqAllGoodsAPI()
  goodsProduct.value = res.data.result
}

</script>

<template>
  <div class="home-product">
    <HomePanel :title="product.name" v-for="product in goodsProduct" :key="product.id">
      <div class="product-box">
        <router-link class="cover" :to="`/category/${product.id}`">
          <img :src="product.picture" alt="商品封面">
          <div class="label">
            <span>{{ product.name }}馆</span>
            <span>{{ product.saleInfo }}</span>
          </div>
        </router-link>
        <ul>
          <li v-for="goods in product.goods" :key="goods.id">
            <GoodsIndex :goods="goods"/>
          </li>
        </ul>
      </div>

    </HomePanel>
  </div>
</template>

<style scoped lang="scss">
.home-product {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin-top: 25px;


  .product-box {
    display: flex;

    .cover {
      width: 40%;
      height: 610px;
      margin-right: 10px;
      position: relative;

      img {
        width: 100%;
        height: 100%;
      }

      .label {
        width: 250px;
        height: 80px;
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #fff;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate3d(0, -50%, 0);

        span {
          padding: 15px 5px;

          &:first-child {
            width: 80px;
            background: rgba(0, 0, 0, 0.9);
          }

          &:last-child {
            width: 160px;
            background: rgba(0, 0, 0, 0.7);
          }
        }
      }
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
    }
  }

}

</style>